<template>
  <div class="verification-dialog">
    <div v-if="isSingleWriteOff && writeOffDetail.writeOffNumber > 1" :class="{ 'tip-content-mobile': showMobilePage }" class="tip-content">
      <i class="el-icon-info" style="color: #FFBC3D" />
      小提示：该付款人存在<span class="write-off-number" @click="handleFilterCurPayer(writeOffDetail)"> {{ writeOffDetail.writeOffNumber }}条流水 </span>，建议使用【更多操作>批量核销】更快捷噢O(∩_∩)O~
    </div>
    <div class="verification-info">
      <Title title="核销" style="margin-bottom: 6px;"/>
      <el-row :gutter="20" type="flex">
        <el-form :class="{'mobile-el-form': showMobilePage}" class="write-off-info" label-position="right" label-width="6.5em">
          <el-col :span="12">
            <el-form-item label="付款人名称：" class="show-list">
              <div :title="writeOffDetail.payName" class="ellipsisOne">{{ writeOffDetail.payName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人类型：" class="show-list">
              <div>{{ writeOffDetail.clientType | clientStatusFilter }}</div>
            </el-form-item>
          </el-col>
          <el-col v-if="!isSingleWriteOff" :span="12">
            <el-form-item label="已选择流水：" class="show-list">
              <div>{{ writeOffDetail.orderNumber }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收入金额：" class="show-list">
              <div>{{ (writeOffDetail.incomeAmount / 100) | moneyFilter }}</div>
            </el-form-item>
          </el-col>
          <el-col v-if="isSingleWriteOff" :span="12">
            <el-form-item label="到账日期：" class="show-list">
              <div>{{ writeOffDetail.arrivalTime | standardFormatNoHour }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可核销金额：" class="show-list">
              <div>{{ (writeOffDetail.unWriteOffAmount / 100) | moneyFilter }}</div>
            </el-form-item>
          </el-col>
          <el-col v-if="isSingleWriteOff" :span="12">
            <el-form-item label="类型：" class="show-list">
              <div>{{ writeOffDetail.flowType | flowTypeFilter }}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="clientForm-info">
      <Title :title="title" style="margin-bottom: 16px;"/>
      <el-form
        ref="clientForm"
        :model="clientForm"
        :rules="clientRules"
        label-position="right"
        label-width="6.5em"
        class="client-form lineHeight32">
        <el-form-item label="客户名称" prop="clientName">
          <el-select
            v-model="clientForm.clientName"
            :remote-method="searchClientName"
            :loading="loading"
            name="clientName"
            filterable
            class="filterableSelect remoteRequest1"
            popper-class="global-select-down maxWidth240"
            remote
            placeholder="搜索匹配"
            size="small"
            @change="clientSelect">
            <el-option
              v-for="(item, index) in clientName"
              :key="item.id + item.value + index"
              :label="item.value"
              :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型:" class="client-type">
          <span style="color: #333">{{ clientForm.clientType || '--' }}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { getClientName } from '@/api/select';
import { moneyFilter } from '@/filters/number';
import {
  setVerificationState,
  clientStatusFilter
} from '@/filters/status';
import { standardFormatNoHour } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  name: 'VerificationDialog',
  components: { Title },
  filters: {
    setVerificationState,
    clientStatusFilter,
    standardFormatNoHour,
    moneyFilter,
    flowTypeFilter(val) {
      // 流水类型。0:普通 1:对抵
      let text = '--';
      switch (val) {
        case 0:
          text = '普通';
          break;
        case 1:
          text = '对抵';
          break;
      }
      return text;
    }
  },
  props: {
    writeOffDetail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    clientFormDefalut: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isSingleWriteOff: {
      type: Boolean,
      default: true
    },
    writeOffDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '请选择需要核销的客户',
      clientForm: {
        clientName: '',
        clientId: '',
        clientType: '',
        clientTypeId: ''
      },
      clientRules: {
        clientName: [{ required: true, trigger: 'blur', message: '请填写客户名称' }]
      },
      clientName: [],
      personList: [],
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    clientFormDefalut(val, oldVal) {
      this.clientForm = JSON.parse(JSON.stringify(this.clientFormDefalut));
    }
  },
  created() {
    this.clientForm = JSON.parse(JSON.stringify(this.clientFormDefalut));
    this.clientNameList();
    window.removeReadOnly();
  },
  mounted() {
    window.remoteRequest('.remoteRequest1', this.searchClientName);
  },
  methods: {
    clientNameList(query) {
      const param = {
        clientName: query,
        isGetMengliClient: true,
        returnPayers: true
      };
      getClientName(param).then(res => {
        this.clientName = res.data;
      }, result => {
        // this.$message.error(result.message);
      });
    },
    // 搜索数据的时候加载状态
    search(query, array) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      } else {
        array = [];
      }
    },
    // 远程搜索客户名称
    searchClientName(query) {
      this.clientNameList(query); // 获取客户名称的列表
      this.search(query, this.clientName);
    },
    // 客户名称下拉框点击列表回填数据到输入框
    clientSelect(item) {
      const { id, value, clientType, payer } = item;
      const obj = {
        clientId: id,
        clientName: value,
        clientType: clientStatusFilter(clientType),
        clientTypeId: clientType,
        payer
      };
      this.clientForm = obj;
      // this.contactList();
    },
    handleFilterCurPayer(info) {
      this.$emit('handleFilterCurPayer', info);
    }
  }
};
</script>
<style lang="scss" scoped>
.write-off-info {
  .el-col {
    .el-form-item {
      border-right: 1px solid #eee;
      margin-bottom: 0 !important;
    }
  }
  .el-col:nth-child(even) {
    .el-form-item {
      border-right: none;
    }
  }
}
.verification-dialog {
  .tip-content {
    background-color: #FFF8EA;
    font-size: 10px;
    color: #333;
    height: 24px;
    line-height: 24px;
    padding-left: 8px;
    margin-bottom: 16px;
    .write-off-number {
      color: #406eff;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      position: relative;
      text-decoration: underline;
    }
    //.write-off-number::after {
    //  content: '__';
    //  left: 2px;
    //  position: absolute;
    //}
    &.tip-content-mobile {
      height: auto;
    }
  }
  .show-list {
    & ::v-deep {
      .el-form-item__label {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        padding: 0;
      }
      .el-form-item__content {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .clientForm-info {
    margin-top: 24px;
  }
  .client-form {
    & ::v-deep {
      .maxWidth240 {
        max-width: 240px;
      }
      .el-form-item {
        margin-bottom: 14px;
      }
      .el-form-item__label {
        color: #666;
      }
      .el-input--small .el-input__inner {
        width: 240px;
      }
      .is-required {
        .el-form-item__label {
          padding-left: 0;
        }
      }
    }
    .client-type {
      margin-bottom: 0 !important;
      ::v-deep .el-form-item__label {
        color: #999 !important;
      }
    }
  }
}
.verification-info {
  .mobile-el-form {
    &::v-deep {
      .el-col {
        .el-form-item {
          border-right: none !important;
        }
      }
    }
  }
}
</style>
